<!--
 * @Author: your name
 * @Date: 2021-10-16 00:48:03
 * @LastEditTime: 2021-10-28 20:06:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \project01\src\App.vue
-->
<template>
  <div id="app">
    <div id="guide-page" v-if="!end">
      <div class="nav">
        <div class="step-list" id="step1_1">
          <el-button
            v-for="item in 6"
            :key="item"
            :type="currentPage >= item ? 'primary' : ''"
            >{{ item }}</el-button
          >
        </div>
        <div class="pagenation" id="step1_4">
          <el-button-group class="pagebtn">
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              :disabled="currentPage <= 1"
              @click="backPage"
              >上一页</el-button
            >
            <el-button
              type="primary"
              :disabled="currentPage >= 7"
              @click="nextPage"
              id="step1_8"
            >
              下一页
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </el-button-group>
        </div>
      </div>
      <div class="main">
        <div class="subject-box">
          <div class="subject-content" id="step1_2">
            <p>算式1：1+2=</p>
            <p>算式2：1×2=</p>
            <p>算式3：5-1=</p>
          </div>
        </div>
        <div class="question-box" id="step1_7">
          <div class="question-type" id="step1_3">
            <h1>
              第{{ currentPage }}题【{{ questionType[currentPage - 1] }}】
            </h1>
          </div>
          <div class="step step_1" v-if="currentPage === 1">
            <div class="question-title" id="step1_5">
              <span>请你选出算式1的计算结果</span>
            </div>
            <div class="question-answer-list" id="step1_6">
              <div
                class="question-answer-item"
                @click="question1AnswerSelect(item)"
                v-for="item in 4"
                :key="item"
                :style="{ 'margin-top': `${item === 1 ? 15 : 0}px` }"
              >
                <el-checkbox :value="answer.question1 === item">
                  <span
                    class="label"
                    :style="{
                      color: answer.question1 === item ? '#409eff' : '',
                    }"
                    >{{ `${["A", "B", "C", "D"][item - 1]}` }}. {{ item }}</span
                  >
                </el-checkbox>
              </div>
            </div>
          </div>
          <div class="step step_2" v-if="currentPage === 2">
            <div class="question-title">
              <span>请你分别选出计算结果最大和最小的算式。</span>
            </div>
            <div class="question-answer">
              <div class="answer-item" id="step2_1">
                <el-dropdown trigger="click" @command="question2MaxValueChange">
                  <el-button type="primary">
                    最大
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in [
                        '算式1：1+2=',
                        '算式2：1×2=',
                        '算式3：5-1=',
                      ]"
                      :key="item"
                      :command="item"
                      ><span style="font-size:24px;font-weight:bold;">{{
                        item
                      }}</span></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <div class="selected-value">
                  {{ answer.question2.max }}
                </div>
              </div>
              <div class="answer-item">
                <el-dropdown trigger="click" @command="question2MinValueChange">
                  <el-button type="primary">
                    最小
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :divided="true"
                      v-for="item in [
                        '算式1：1+2=',
                        '算式2：1×2=',
                        '算式3：5-1=',
                      ]"
                      :key="item"
                      :command="item"
                      ><span style="font-size:24px;font-weight:bold;">{{
                        item
                      }}</span></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <div class="selected-value">
                  {{ answer.question2.min }}
                </div>
              </div>
            </div>
          </div>
          <div class="step step_1" v-if="currentPage === 3">
            <div class="question-title">
              <span>请你在下列选项中将算式1、算式2的计算结果都选出来。</span>
            </div>
            <el-checkbox-group
              v-model="answer.question3"
              class="question-answer-list"
              id="step3_1"
            >
              <el-checkbox
                class="question-answer-item"
                v-for="item in 4"
                :key="item"
                :style="{ 'margin-top': `${item === 1 ? 15 : 0}px` }"
                :label="['A', 'B', 'C', 'D'][item - 1]"
                ><span
                  class="label"
                  :style="{
                    color: answer.question3.includes(item) ? '#409eff' : '',
                  }"
                  >{{ `${["A", "B", "C", "D"][item - 1]}` }}. {{ item }}</span
                ></el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="step step_4 step_6" v-if="currentPage === 4">
            <div class="question-title">
              <span
                >请利用虚拟键盘中的数字和符号将算式3输入到下面的输入框中</span
              >
            </div>
            <el-input
              placeholder="请输入算式3"
              :value="answer.question4"
              style="margin-top:20px;height:50px;"
            >
              <template slot="prepend">算式3</template>
            </el-input>
            <div class="virtual_keyboard" id="step4_1">
              <div class="title">
                <span>虚拟键盘</span>
              </div>
              <div
                class="key"
                v-for="item in [
                  '1',
                  '2',
                  '3',
                  '+',
                  '4',
                  '5',
                  '6',
                  '-',
                  '7',
                  '8',
                  '9',
                  '×',
                  '删除',
                  '0',
                  ' ',
                  '=',
                ]"
                :key="item"
                @click="question4ValueSet(item)"
              >
                <span>{{ item }}</span>
              </div>
            </div>
          </div>
          <div class="step step_6 step_5" v-if="currentPage === 5">
            <div class="question-title">
              <span>请利用虚拟键盘分别输入算式1、算式2和算式3的计算结果。</span>
            </div>
            <div class="answer-box">
              <div class="answer-list">
                <el-button
                  v-for="item in 3"
                  :type="question5Selected == item ? 'primary' : ''"
                  :key="item"
                  @click="question5Selected = item"
                  class="question5InputItem"
                >
                  算式{{ item }}的计算结果：{{
                    answer.question5[`result${item}`]
                  }}
                </el-button>
              </div>
              <div class="input-box">
                <div class="virtual_keyboard" id="step5_1">
                  <div class="title">
                    <span>虚拟键盘</span>
                  </div>
                  <div
                    class="key"
                    v-for="item in 9"
                    :key="item"
                    @click="question5InputValue(item)"
                  >
                    <span>{{ item }}</span>
                  </div>
                  <div class="key" @click="question5InputValue('-')">
                    <span>删除</span>
                  </div>
                  <div class="key" @click="question5InputValue(0)">
                    <span>0</span>
                  </div>
                  <div class="key" @click="question5InputValue('c')">
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="step step_6" v-if="currentPage === 6">
            <div class="question-title">
              <span
                >请对你刚才做过的题目的难度进行评价。请在下面输入框中输入“非常难”、“比较难”、“一般”、“比较简单”、“非常简单”中的一个。</span
              >
            </div>
            <el-input
              placeholder="请输入你的评价"
              v-model="answer.question6"
              id="step6_1"
            >
              <template slot="prepend">我的评价</template>
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div id="end-page" v-else>
      <div class="bubble">
        <div class="content">
          <p>
            你已完成热身任务，依次点击下方【提交答案】和【进入下一题】即可开始本次的正式测试。祝你答题顺利！
          </p>
        </div>
      </div>
      <div class="bottom">
        <img src="./assets/tip-people.jpg" />
        <div class="button-box"></div>
      </div>
    </div>
  </div>
</template>

<script>
import introJs from "intro.js";
export default {
  data() {
    return {
      currentPage: 1,
      questionType: [
        "单选题",
        "单选题",
        "多选题",
        "填空题",
        "填空题",
        "填空题",
      ],
      answer: {
        question1: 0,
        question2: {
          max: "",
          min: "",
        },
        question3: [],
        question4: "",
        question5: {
          result1: "",
          result2: "",
          result3: "",
        },
        question6: "",
      },
      question5Selected: -1,
      question2SelectMode: "max",
      stepGuideList: [
        {
          state: false,
          stepGuide: [
            {
              element: "#step1_1",
              intro:
                "这里是作答进度条，蓝色代表已查看题目，白色代表还未查看题目。(阅读后可点击“下一步”)",
              position: "bottom",
            },
            {
              element: "#step1_2",
              intro:
                "这里是题目信息区，呈现题目的情境和各种信息。(阅读后可点击“下一步”)",
              position: "right",
            },
            {
              element: "#step1_3",
              intro: "这里是当前题号及题型说明(阅读后可点击“下一步”)",
              position: "right",
            },
            {
              element: "#step1_4",
              intro:
                "这里是页面切换按钮，点击相应的按钮翻到上一页或下一页。(阅读后可点击“下一步”)",
              position: "right",
            },
            {
              element: "#step1_5",
              intro:
                "这里是题干区，蓝色方框中呈现了每个题目的题干。(阅读后可点击“下一步”)",
              position: "right",
            },
            {
              element: "#step1_6",
              intro:
                "这里是作答区，通过点击或键盘输入的方式进行答题。(阅读后可点击“下一步”)",
              position: "right",
            },
            {
              element: "#step1_7",
              intro:
                "这是一个单选题，请点击一个选项方框进行选择。点击其他选项方框即可修改作答。(阅读后可点击“下一步”)",
              position: "right",
            },
            {
              element: "#step1_8",
              intro: "作答题目后，点击 “下一页”。(阅读后可点击“完成”)",
              position: "right",
            },
          ],
        },
        {
          state: false,
          stepGuide: [
            {
              element: "#step1_7",
              intro: `<ul>
                              <li>这是一个单选题，请点击选项框，在弹出的所有选项中点击选择正确的选项。</li>
                              <li>点击其他选项即可修改作答。</li>
                           </ul>
                           (阅读后可点击“下一步”)`,
              position: "top",
            },
            {
              element: "#step1_8",
              intro: "作答题目后，点击 “下一页”。(阅读后可点击“完成”)",
              position: "left",
            },
          ],
        },
        {
          state: false,
          stepGuide: [
            {
              element: "#step1_7",
              intro: `<ul>
                              <li>这是一个多选题，请点击多个选项方框进行选择。</li>
                              <li>再次点击选中的方框可以取消选择。</li>
                           </ul>·
                           (阅读后可点击“下一步”)`,
              position: "left",
            },
            {
              element: "#step1_8",
              intro: "作答题目后，点击“下一页”。(阅读后可点击“完成”)",
              position: "bottom",
            },
          ],
        },
        {
          state: false,
          stepGuide: [
            {
              element: "#step1_7",
              intro: `<ul> 
                              <li>这是一个填空题，你可以点击虚拟键盘上的数字和符号进行输入。</li>
                              <li>点击删除即可清除前一个输入的数字或符号；</li>
                           </ul>
                           (阅读后可点击“下一步”)`,
              position: "bottom",
            },
            {
              element: "#step1_8",
              intro: "作答题目后，点击 “下一页”。(阅读后可点击“完成”)",
              position: "bottom",
            },
          ],
        },
        {
          state: false,
          stepGuide: [
            {
              element: "#step1_7",
              intro: `<ul>
                             <li>这是一个填空题，你可以先点击要输入的方框，然后点击虚拟键盘上的数字和符号进行输入。</li>
                             <li>点击删除即可清除前一个输入的数字或符号</li>
                           </ul>
                           (阅读后可点击“下一步”)`,
              position: "bottom",
            },
            {
              element: "#step1_8",
              intro: "作答题目后，点击 “下一页”。(阅读后可点击“完成”)",
              position: "bottom",
            },
          ],
        },
        {
          state: false,
          stepGuide: [
            {
              element: "#step1_7",
              intro:
                "这是一个填空题，请利用你的电脑键盘进行拼音、数字输入等操作。(阅读后可点击“下一步”)",
              position: "bottom",
            },
            {
              element: "#step1_8",
              intro: "作答题目后，点击“下一页”。(阅读后可点击“完成”)",
              position: "bottom",
            },
          ],
        },
      ],
      end: false,
    };
  },
  methods: {
    nextPage() {
      let result = [
        this.answer.question1 != 0,
        this.answer.question2.max != "" && this.answer.question2.min != "",
        this.answer.question3.length != 0,
        this.answer.question4 != "",
        this.answer.question5.result1 != "" &&
          this.answer.question5.result2 != "" &&
          this.answer.question5.result3 != "",
        this.answer.question6 != "",
        // ["非常难", "比较难", "一般", "比较简单", "非常简单"].includes(
        //   this.answer.question6
        // ),
      ];
      if (this.currentPage + 1 <= 6) {
        if (result[this.currentPage - 1]) {
          parent.postMessage({ data: this.answer, isAnswered: false }, "*");
          this.currentPage++;
          if (!result[this.currentPage - 1] && this.currentPage <= 6) {
            this.loadGuidence(this.currentPage - 1);
            // this.$nextTick(() => {
            //   introJs()
            //     .setOptions({
            //       prevLabel: "上一步",
            //       nextLabel: "下一步",
            //       skipLabel: "",
            //       doneLabel: "完成",
            //       steps: this.stepGuideList[this.currentPage - 1].stepGuide,
            //       hidePrev: true,
            //       hideNext: true,
            //       showBullets: false,
            //       exitOnOverlayClick: false,
            //       disableInteraction: true,
            //       exitOnEsc: false,
            //       tooltipClass: "customTooltip",
            //     })
            //     .start();
            // });
          }
        } else {
          this.$message({
            showClose: true,
            message: "请作答本题目后再点击下一页",
            type: "warning",
          });
        }
      } else {
        if (result[5]) {
          parent.postMessage({ data: this.answer, isAnswered: true }, "*");
          this.end = true;
        } else {
          this.$message({
            showClose: true,
            message: "请输入：“比较难”,“一般”,“比较简单”,“非常简单”中的一项",
            type: "warning",
          });
        }
      }
    },
    backPage() {
      let result = [
        this.answer.question1 != 0,
        this.answer.question2.max != "" && this.answer.question2.min != "",
        this.answer.question3.length != 0,
        this.answer.question4 != "",
        this.answer.question5.result1 != "" &&
          this.answer.question5.result2 != "" &&
          this.answer.question5.result3 != "",
        this.answer.question6 != "",
      ];
      this.currentPage--;
      if (!result[this.currentPage - 1] && this.currentPage >= 1) {
        this.loadGuidence(this.currentPage - 1);
        // this.$nextTick(() => {
        //   introJs()
        //     .setOptions({
        //       prevLabel: "上一步",
        //       nextLabel: "下一步",
        //       skipLabel: "",
        //       doneLabel: "完成",
        //       steps: this.stepGuideList[this.currentPage - 1].stepGuide,
        //       hidePrev: true,
        //       hideNext: true,
        //       showBullets: false,
        //       exitOnOverlayClick: false,
        //       disableInteraction: true,
        //       exitOnEsc: false,
        //       tooltipClass: "customTooltip",
        //     })
        //     .start();
        // });
      }
    },
    question1AnswerSelect(answer) {
      this.answer.question1 = answer;
      parent.postMessage({ data: this.answer, isAnswered: false }, "*");
    },
    question5InputValue(value) {
      if (this.question5Selected === -1) {
        this.$message({
          message: "请先选择题目",
          type: "warning",
        });
      } else {
        if (value === "c") {
          // this.answer.question5[`result${this.question5Selected}`] = "";
        } else if (value === "-") {
          if (this.answer.question5[`result${this.question5Selected}`] != "") {
            let str = [
              ...this.answer.question5[`result${this.question5Selected}`],
            ];
            str.pop();
            this.answer.question5[`result${this.question5Selected}`] = str.join(
              ""
            );
            parent.postMessage({ data: this.answer, isAnswered: false }, "*");
          }
        } else {
          this.answer.question5[
            `result${this.question5Selected}`
          ] += value.toString();
          parent.postMessage({ data: this.answer, isAnswered: false }, "*");
        }
      }
    },
    question4ValueSet(value) {
      if (value === "删除" && this.answer.question4.length != 0) {
        let str = [...this.answer.question4];
        str.pop();
        this.answer.question4 = str.join("");
        parent.postMessage({ data: this.answer, isAnswered: false }, "*");
      } else if (value === " ") {
      } else {
        if (value != "删除") {
          this.answer.question4 += value;
          parent.postMessage({ data: this.answer, isAnswered: false }, "*");
        }
      }
    },
    question2Open(mode) {
      this.question2SelectMode = mode;
      this.question2SelectShow = true;
    },
    question2MaxValueChange(e) {
      this.answer.question2.max = e;
      parent.postMessage({ data: this.answer, isAnswered: false }, "*");
    },
    question2MinValueChange(e) {
      this.answer.question2.min = e;
      parent.postMessage({ data: this.answer, isAnswered: false }, "*");
    },
    loadGuidence(step) {
      this.$nextTick(() => {
        if (!this.stepGuideList[step].state) {
          introJs()
            .setOptions({
              prevLabel: "上一步",
              nextLabel: "下一步",
              skipLabel: step===0?"回到第一步":"跳过本页引导",
              doneLabel: "完成",
              steps: this.stepGuideList[step].stepGuide,
              hidePrev: true,
              hideNext: true,
              showBullets: false,
              exitOnOverlayClick: false,
              disableInteraction: true,
              exitOnEsc: false,
              tooltipClass: "customTooltip",
            })
            .onskip(() => {
              if(step===0){
                this.loadGuidence(step)
              }
            })
            .start();
        }
      });
    },
  },
  mounted() {
    this.loadGuidence(0);
  },
};
</script>

<style lang="less">
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  > body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    #app {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }
  }
}
#guide-page {
  width: 100%;
  height: 100%;
  > .nav {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    padding: 0px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .step-list {
      width: auto;
    }
  }
  > .main {
    width: 100%;
    height: calc(100% - 60px);
    box-sizing: border-box;
    border-top: 10px solid #000000;
    > .subject-box {
      width: 50%;
      height: 100%;
      float: left;
      border-right: 5px solid #000000;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      > .subject-content {
        width: 80%;
        > p {
          font-size: 32px;
        }
      }
    }
    > .question-box {
      width: 50%;
      height: 100%;
      float: right;
      border-left: 5px solid #000000;
      box-sizing: border-box;
      padding: 10px;
      overflow-y: scroll;
      > .question-type {
        height: 80px;
        background-color: #ff9900;
        min-width: 200px;
        display: inline-block;
        text-align: center;
        box-sizing: border-box;
        padding: 0px 10px;
        margin-bottom: 10px;
      }
      > .step {
        width: 100%;
        height: calc(100% - 90px);
        > .question-title {
          width: 100%;
          height: 200px;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #00b0f0;
          > span {
            font-size: 28px;
            font-weight: bold;
          }
        }
      }
      > .step_1 {
        > .question-answer-list {
          width: 100%;
          > .question-answer-item {
            width: 100%;
            height: 66px;
            background-color: #99cc99;
            box-sizing: border-box;
            padding: 0px 10px;
            display: flex;
            align-items: center;
            border-left: 2px solid #000000;
            border-right: 2px solid #000000;
            border-top: 2px solid #000000;
            cursor: pointer;
            > span {
              font-size: 22px;
            }
            &:nth-of-type(4) {
              border-bottom: 2px solid #000000;
            }
          }
          .label {
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
      > .step_2 {
        > .question-answer {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 10px;
          height: 120px;
          > .answer-item {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            flex-wrap: wrap;
            .selected-value {
              box-sizing: border-box;
              padding: 0px 10px;
              height: 60px;
              line-height: 60px;
              font-size: 28px;
              font-weight: 600;
            }
          }
        }
      }

      > .step_4 {
        .el-input {
          height: 50px;
          .el-input-group__prepend {
            font-size: 22px;
          }
          .el-input__inner {
            height: 50px !important;
            font-size: 22px;
          }
        }
        > .virtual_keyboard {
          width: 400px;
          margin: 10px auto;
          > .title {
            width: 100%;
            height: 50px;
            background-color: #92d050;
            display: flex;
            align-items: center;
            justify-content: center;
            > span {
              font-size: 20px;
              color: #000000;
              font-weight: bold;
            }
          }
          > .key {
            width: 100px;
            height: 40px;
            background-color: #e2f0d9;
            float: left;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            > span {
              font-size: 20px;
              font-weight: bold;
            }
            box-sizing: border-box;
            border-top: 2px solid #000000;
            border-left: 2px solid #000000;
            &:nth-child(5),
            &:nth-child(9),
            &:nth-child(13),
            &:nth-child(17) {
              border-right: 2px solid #000000;
            }
            &:nth-child(17),
            &:nth-child(16),
            &:nth-child(15),
            &:nth-child(14) {
              border-bottom: 2px solid #000000;
            }
          }
        }
      }

      > .step_5 {
        > .answer-box {
          width: 100%;
          margin-top: 20px;
          height: calc(100% - 220px);
          > .answer-list {
            width: 50%;
            height: 100%;
            float: left;
            > .question5InputItem {
              width: 100%;
              height: 60px;
              margin: 0px auto;
              margin-top: 15px;
              font-size: 22px;
            }
          }
          > .input-box {
            width: 50%;
            height: 100%;
            float: right;
            > .virtual_keyboard {
              width: 300px;
              margin: 10px auto;
              > .title {
                width: 100%;
                height: 50px;
                background-color: #92d050;
                display: flex;
                align-items: center;
                justify-content: center;
                > span {
                  font-size: 20px;
                  color: #000000;
                  font-weight: bold;
                }
              }
              > .key {
                width: 100px;
                height: 45px;
                background-color: #e2f0d9;
                float: left;
                text-align: center;
                line-height: 45px;
                cursor: pointer;
                > span {
                  font-size: 20px;
                  font-weight: bold;
                }
                box-sizing: border-box;
                border-top: 2px solid #000000;
                border-left: 2px solid #000000;
                &:nth-child(4),
                &:nth-child(7),
                &:nth-child(10),
                &:nth-child(13) {
                  border-right: 2px solid #000000;
                }
                &:nth-child(11),
                &:nth-child(12),
                &:nth-child(13) {
                  border-bottom: 2px solid #000000;
                }
              }
            }
          }
        }
      }
      > .step_6 {
        .el-input {
          margin-top: 40px;
          border-radius: 0;
          height: 80px;
          .el-input-group__prepend {
            background-color: #00b0f0;
            font-size: 22px;
            color: #000000;
            font-weight: bold;
            border-color: #000000;
            border-radius: 0;
          }
          input {
            background-color: #deebf7;
            border-color: #000000;
            border-radius: 0;
            height: 80px;
            font-size: 22px;
          }
        }
      }
    }
  }
}
#end-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 5%;
  > .bubble {
    width: 75%;
    margin: 0px auto;
    height: 40%;
    background: #deebf7;
    border-radius: 40px;
    position: relative;
    > .content {
      width: 100%;
      height: 100%;
      background: #deebf7;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 40px;
      box-sizing: border-box;
      padding: 10px 20px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      > p {
        font-size: 26px;
        &:nth-child(2),
        &:nth-child(3) {
          text-indent: 2rem;
        }
      }
    }
    &::after {
      content: "";
      position: absolute;
      bottom: -70%;
      left: 15%;
      border-top: 300px solid #deebf7;
      border-right: 250px solid transparent;
      transform: rotate(25deg);
      z-index: 10;
    }
  }
  > .bottom {
    width: 90%;
    height: 30%;
    margin: 0px auto;
    position: relative;
    margin-top: 60px;
    > img {
      height: 100%;
    }
    > .button-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      > .el-button {
        width: 130px;
        height: 40px;
      }
    }
  }
}
.question2-answer-item {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  background-color: #e2f0d9;
  box-sizing: border-box;
  padding: 0px 10px;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
}
.customTooltip {
  font-size: 22px;
}
.introjs-tooltip {
  width: 600px !important;
}
</style>
